<template>
  <div class="icons">
    <div class="icon" v-for="item of icons" :key="item.id">
      <div class="icon-img">
        <img class="icon-img-content" :src="item.imgUrl">
      </div>
      <div class="content">
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      icons: [
        {
          id: '1',
          content: '天猫商城',
          imgUrl: 'https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1'
        },
        {
          id: '2',
          content: '今日爆款',
          imgUrl: 'https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1'
        },
        {
          id: '3',
          content: '天猫国际',
          imgUrl: 'https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1'
        },
        {
          id: '4',
          content: '饿了么',
          imgUrl: 'https://gw.alicdn.com/tfs/TB1DaMyVpzqK1RjSZFoXXbfcXXa-185-144.png?getAvatar=1'
        },
        {
          id: '5',
          content: '天猫超市',
          imgUrl: 'https://gw.alicdn.com/tfs/TB1FucwVwHqK1RjSZFgXXa7JXXa-183-144.png?getAvatar=1'
        }, {
          id: '6',
          content: '充值中心',
          imgUrl: 'https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1'
        },
        {
          id: '7',
          content: '机票酒店',
          imgUrl: 'https://gw.alicdn.com/tfs/TB1O_AyVwHqK1RjSZFPXXcwapXa-183-144.png?getAvatar=1'
        },
        {
          id: '8',
          content: '金币庄园',
          imgUrl: 'https://gw.alicdn.com/tfs/TB19yZJVBLoK1RjSZFuXXXn0XXa-183-144.png?getAvatar=1'
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
.icons
  overflow hidden
  height 0
  padding-bottom 50%
  .icon
    position relative
    overflow hidden
    float left
    height 0
    width 25%
    padding-bottom 25%
    .icon-img
      position absolute
      top 0
      left 0
      right 0
      bottom 0.44rem
      .icon-img-content
        height 100%
        width 100%
  .content
    position absolute
    bottom 0
    left 0
    right: 0;
    height 0.44rem
    line-height 0.44rem
    font-size 0.2rem
    text-align center
    color #333
</style>
